<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				$("#sub").click(function(){
								var validityState =$("#email")[0];// document.getElementById("email");
					            if (validityState.validity.valueMissing) {
					                validityState.setCustomValidity("邮箱填写未填");
					            } else if (validityState.validity.typeMismatch) {
					                validityState.setCustomValidity("邮箱类型错误");
					            } else if (validityState.validity.patternMismatch) {
					                validityState.setCustomValidity("邮箱格式错");
					            }else{
									validityState.setCustomValidity("");
								}
								
					// var e=$("#email")[0];
					// console.log(e.validity.valueMissing+","+e.validity.patternMismatch);
					
					// if(e.validity.valueMissing){
					// 	e.setCustomValidity("电子邮件一定要填！");
					// }else{
					// 	if(e.validity.patternMismatch){
					// 		e.setCustomValidity("电子邮件格式要正确，参考xxx@yy.zz！");
					// 	}else{
					// 		e.setCustomValidity("");
					// 	}
					// } 
				});
			});
		</script>
	</head>
	<body>
		<form action="jq1.html">
			<p>
				<input type="email" id="email" placeholder="请输入常用邮箱" name="email" required="required" />
			</p>
			<p>
				<input type="number" id="age" name="age" max="120" min="14" placeholder="年龄" required="required" />
			</p>
			<p>
				<input type="submit" id="sub" />
			</p>
		</form>
	</body>
</html>
